/*
  学习目标：React中JSX-插值表达式-函数和其它类型
  变量 
  ✅基础类型：string number boolean null undefined
  ✅引用类型：数组和对象、
    对象：直接报错
    数组：每项元素都会当做一个个的DOM节点渲染
    函数类型：
  其它类型： 
  1.三元表达式、
  2.
  3.JSX本身
*/

import React from 'react';
import ReactDOM from 'react-dom';

const obj = {
  name: 'zs',
};

function getName(obj) {
  return obj.name;
}

const ulNode = (
  <ul>
    <li>aa</li>
    <li>bb</li>
    <li>cc</li>
  </ul>
);
const isShow = true;

// 🔔函数本身也是一种对象
// 🔔函数的调用，可以放入插值表达式中。
// 🔔函数返回同样是不能是对象
const divNode = (
  <div>
    {getName(obj)}
    {/* 1.三元表达式 */}
    <h1>{isShow ? '显示' : '不显示'}</h1>
    {/* 2.逻辑运算符 */}
    <h2>{isShow && '心事'}</h2>
    {/* 3.JSX本身也是表达式 */}
    <h3>{ulNode}</h3>
  </div>
);

ReactDOM.render(divNode, document.getElementById('root'));
